$(function () {

    /*
        分类页面实现业务逻辑：
            1. 动态渲染分类页数据
            2. 实现左右滚动条效果
            3. 实现本地存储 --  保存周期差异
                会话存储   sessionStorage
                永久存储   localStorage
                
    */ 

    // 全局变量 --  左边分类li的索引
    var index;
    // 全局变量 --  左边滚动条对象
    var leftScroll;
    // 全局变量 --  右边需加载图片数量
    var imgs;
    // 全局变量 --  存储需渲染的数据和保存有限期的对象
    var cgDatas = {};

    // 初始化函数调用
    init();

    /* 初始化调用函数 */
    function init() {
        // 渲染分类数据
        renderCategorys();
    
        // 事件触发
        eventList();
    };

    /* 绑定事件 */
    function eventList() {
        // 点击事件
        $('.category_left').on('tap', 'li', function () {
            // 排他思想 --  改变被点击的样式
            $(this).addClass('active').siblings().removeClass('active');
            // 被点击的li滚动到最上面
            leftScroll.scrollToElement(this);
            // 获取当前被点击li的索引
            index = $(this).index();
            // 渲染分类右边数据
            renderRight(index);
        });
    };

    /* 请求：获取分类数据 */
    function getCategoryDatas() {
        $.get('/categories', function (result) {
            if (result.meta.status == 200) {
                // 获取当前发送请求成功的瞬时时间
                var time = Date.now();

                // 渲染数据时只需要获取result里的data
                var rightData = result.data;

                // 将以上两个数据存储到已定义的空对象中
                cgDatas.time = time;
                cgDatas.rightData = rightData;
                // console.log(cgDatas)

                /* 本地存储 */
                // 1 先转化成Json格式字符串
               var jsonStr = JSON.stringify(cgDatas);
                // 2 使用API存储
                localStorage.setItem('cgDatas',jsonStr);   
                
                // 左边分类列表渲染
                renderLeft();

                // 初始渲染分类右边数据
                renderRight(0);
            } else {
                console.log("请求数据失败");
            };
        });
    };

    /* 渲染分类页面数据 */ 
    function renderCategorys() {
        // 获取本地存储
        var jsonData = localStorage.getItem('cgDatas'); 

        // 判断是否有本地存储
        if(jsonData){
            // 转化成json对象
            cgDatas = JSON.parse(jsonData);
            // 判断本地存储时间有没过期 --  初定义超过10s为过期
            if(Date.now() - cgDatas.time > 10000){
                // 清除本地存储数据
                localStorage.clear();
                // 重新发送请求数据
                getCategoryDatas();
            }else {
                // 左边分类列表渲染
                renderLeft();

                // 初始渲染分类右边数据
                renderRight(0);
            };
        }else {
            // 发送请求数据
            getCategoryDatas();
        };
    };

    /* 左边分类列表数据渲染 */
    function renderLeft() {
        // 实现左边分类列表显示
        // 生成结构
        var leftHtml = template('leftTpl', { data: cgDatas.rightData });
        // 渲染到页面
        $('.category_left > ul').html(leftHtml);

        // 实现滚动条效果
        leftScroll = new IScroll('.category_left');
    };

    /* 分类右边数据渲染 */
    function renderRight(index) {
        // 根据索引渲染特定数据
        var datas = cgDatas.rightData[index].children;

        // 实现右边对应某类商品的品牌
        var rightHtml = template('rightTpl', { data: datas });
        $('.category_right').html(rightHtml);

        // 右边的滚动条效果需确保在每张图都加载完毕后才添加
        imgs = $('.category_item img').length;
    
        // 加载事件 --  load
        $('.category_item img').on('load',function(){
            imgs--;     
            /* 图片加载完毕 */
            if(imgs == 0){
                // 右边滚动条对象
                var rightScroll = new IScroll(".category_right");
            };
        });
    };
})